<!-- @module summary -->
<!-- @author: YunTao.Li -->
<!-- @description: 考勤汇总页面 -->
<!-- @since: 2019-11-05 21:10:32 -->
<template>
  <el-card  class="box-card el-card-flex" >
  <div slot="header" class="clearfix">
    <span>
        <i class="el-icon-position"></i>
         查询信息
      </span>
  </div>
    <!-- form begin -->
    <div style="margin: 10px" >
    <el-form ref="queryForm" label-width="120px" class="div-header" :model="queryForm" :rules="queryFormRule" size="mini">
        <el-row :gutter="10">

          <!-- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="统计方式" prop="tjfs">
              <el-input v-model="queryForm.tjfs" placeholder="统计方式" />
               <dictCombo v-model="queryForm.businessStatus" dicttypeid="businessStatus" name="businessStatus" placeholder="审批状态" />
            </el-form-item>
          </el-col>-->
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="年月" prop="yearmonth">
              <el-date-picker v-model="queryForm.yearmonth" style="width:240px;" type="month" placeholder="选择月" value-format="yyyy-MM" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="组织机构" prop="org">
              <OrgSelectTree v-model="queryForm.orgCode"    style="width:240px;" placeholder="组织机构" @bindLabel="bindLabel" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="部门选择" prop="deptName">
              <DeptSelectTree
                style="width:240px;"
                ref="deptSelectRef"
                v-model="queryForm.deptCode"
                placeholder="部门下拉"
                :parent-org-id="queryForm.ouId"
                :default-dept-name="queryForm.deptName"
                @bindLabel="bindDeptLabel"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="员工" prop="empname">
              <!-- <el-input v-model="queryForm.empname" placeholder="员工姓名" /> -->
              <EmpCombobox v-model="queryForm.empCode" placeholder="员工" style="width:240px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="btnStyle">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getList()"
          >查询</el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-refresh"
            @click="resetForm('queryForm')"
          >重置</el-button>
        </div>
    </el-form>
    </div>

    <!-- form end -->
      <div class="div-button">
        <el-form ref="calcQueryForm" :model="calcQueryForm" label-width="120px" size="mini">
          <!-- <el-date-picker
            v-model="calcQueryForm.startDate"
            type="date"
            size="mini"
            name="startDate"
            placeholder="统计开始日期"
            value-format="yyyy-MM-dd"
          /> -
          <el-date-picker
            v-model="calcQueryForm.endDate"
            type="date"
            size="mini"
            name="endDate"
            placeholder="统计结束日期"
            value-format="yyyy-MM-dd"
          /> -->
          <el-button
            icon="el-icon-menu"
            type="primary"
            size="small"
            @click="onSummaryCalc()"
          >考勤统计</el-button>
        </el-form>
      </div>


      <!-- table begin-->
      <div class="el-flex el-box-column " style="margin: 10px;">
        <el-card class="box-card el-card-flex" >
        <div slot="header" class="clearfix">
        <span>
        <i class="el-icon-position"></i>
          考勤汇总
        </span>
        </div>

        <div class="el-flex el-box-column" style="margin: 5px;" >
          <el-table v-loading="listLoading" :data="list" :height="height" border fit highlight-current-row class="tableStyle">
            <el-table-column align="center" type="index" width="55" label="序号" />
            <!--ID-->
            <!-- <el-table-column align="center" label="主键" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.kqNo }}</span>
              </template>
            </el-table-column> -->

            <!--月份-->
            <el-table-column width="100px" align="center" label="月份">
              <template slot-scope="scope">
                <span>{{ scope.row.periodCode | parseTime('{y}-{m}') }}</span>
              </template>
            </el-table-column>

            <!--所属机构-->
            <el-table-column width="120px" align="center" label="所属机构">
              <template slot-scope="scope">
                <span>{{ scope.row.orgName }}</span>
              </template>
            </el-table-column>
            <!--所属部门-->
            <el-table-column width="120px" align="center" label="所属部门">
              <template slot-scope="scope">
                <span>{{ scope.row.deptName }}</span>
              </template>
            </el-table-column>

            <!--员工姓名-->
            <el-table-column width="100px" align="center" label="员工姓名">
              <template slot-scope="scope">
                <span>{{ scope.row.empName }}</span>
              </template>
            </el-table-column>

            <!--应到天数-->
            <el-table-column width="100px" align="center" label="应到天数">
              <template slot-scope="scope">
                <span>{{ scope.row.expectDays }}</span>
              </template>
            </el-table-column>

            <!--实到天数-->
            <el-table-column width="100px" align="center" label="实到天数">
              <template slot-scope="scope">
                <span>{{ scope.row.actualDays }}</span>
              </template>
            </el-table-column>

            <!--忘签到次数-->
            <el-table-column width="100px" align="center" label="忘签到次数">
              <template slot-scope="scope">
                <span>{{ scope.row.notSignUp }}</span>
              </template>
            </el-table-column>

            <!--忘签退次数-->
            <el-table-column width="100px" align="center" label="忘签退次数">
              <template slot-scope="scope">
                <span>{{ scope.row.notSignOut }}</span>
              </template>
            </el-table-column>

            <!--矿工天数-->
            <el-table-column width="100px" align="center" label="矿工天数">
              <template slot-scope="scope">
                <span>{{ scope.row.leaveDays }}</span>
              </template>
            </el-table-column>
            <!--迟到次数30分钟以内-->
            <el-table-column width="100px" align="center" label="迟到次数30分钟以内">
              <template slot-scope="scope">
                <span>{{ scope.row.delaySignNum }}</span>
              </template>
            </el-table-column>

            <!--迟到次数-->
            <el-table-column width="180px" align="center" label="迟到次数(30分钟【含】以上)">
              <template slot-scope="scope">
                <span>{{ scope.row.delaySignNumMore }}</span>
              </template>
            </el-table-column>

            <!--早退次数30分钟以内-->
            <el-table-column width="180px" align="center" label="早退次数(30分钟以内)">
              <template slot-scope="scope">
                <span>{{ scope.row.preSignNum }}</span>
              </template>
            </el-table-column>

            <!--早退次数-->
            <el-table-column width="100px" align="center" label="早退次数(30分钟【含】以上)">
              <template slot-scope="scope">
                <span>{{ scope.row.preSignNumMore }}</span>
              </template>
            </el-table-column>

            <!--调休天数-->
            <el-table-column width="80px" align="center" label="调休天数">
              <template slot-scope="scope">
                <span>{{ scope.row.takeWorkingDays }}</span>
              </template>
            </el-table-column>

            <!--病假天数-->
            <el-table-column width="80px" align="center" label="病假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.sickDays }}</span>
              </template>
            </el-table-column>

            <!--事假天数-->
            <el-table-column width="80px" align="center" label="事假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.privateDays }}</span>
              </template>
            </el-table-column>

            <!--年休假天数-->
            <el-table-column width="80px" align="center" label="年休假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.annualDays }}</span>
              </template>
            </el-table-column>

            <!--产假天数-->
            <el-table-column width="80px" align="center" label="产假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.maternityDays }}</span>
              </template>
            </el-table-column>

            <!--申诉次数-->
            <el-table-column width="80px" align="center" label="申诉次数">
              <template slot-scope="scope">
                <span>{{ scope.row.appealDays }}</span>
              </template>
            </el-table-column>

            <!--公出天数-->
            <el-table-column width="80px" align="center" label="公出天数">
              <template slot-scope="scope">
                <span>{{ scope.row.awayDays }}</span>
              </template>
            </el-table-column>

            <!--婚假天数-->
            <el-table-column width="80px" align="center" label="婚假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.marriageDays }}</span>
              </template>
            </el-table-column>

            <!--哺乳假天数-->
            <el-table-column width="80px" align="center" label="哺乳假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.lactationDays }}</span>
              </template>
            </el-table-column>

            <!--丧假天数-->
            <el-table-column width="80px" align="center" label="丧假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.funeralDays }}</span>
              </template>
            </el-table-column>

            <!--探亲假天数-->
            <el-table-column width="80px" align="center" label="探亲假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.homeLeaveDays }}</span>
              </template>
            </el-table-column>

            <!--工伤假天数-->
            <el-table-column width="80px" align="center" label="工伤假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.injuryDays }}</span>
              </template>
            </el-table-column>

            <!--培训考试假天数-->
            <el-table-column width="80px" align="center" label="培训考试假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.trainingDays }}</span>
              </template>
            </el-table-column>

            <!--公假天数-->
            <el-table-column width="80px" align="center" label="公假天数">
              <template slot-scope="scope">
                <span>{{ scope.row.pubLeaveDays }}</span>
              </template>
            </el-table-column>

            <!--备注-->
            <el-table-column width="80px" align="center" label="备注">
              <template slot-scope="scope">
                <span>{{ scope.row.kqDesc }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

      <el-dialog :title="processObject.processTitle" :visible.sync="processObject.progressVisible" width="30%" top="30vh" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <el-progress
          ref="progressRef"
          :text-inside="true"
          :stroke-width="18"
          :percentage="processObject.progressPercentage"
          :color="processObject.progressColors.percent100"
        />
      </el-dialog>
      <!-- table end -->
      <pagination  background
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total" :page.sync="queryForm.page"
                   :limit.sync="queryForm.limit" @pagination="getList" />

        </el-card>
      </div>
  </el-card>
</template>

<script>
import { summaryList, summaryCalc } from '@/api/attendance/summary-service'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// import dictCombo from './components/combo/dict-comb'
import OrgSelectTree from './components/combo/org-tree-select.vue'
import DeptSelectTree from './components/combo/dept-tree-select.vue'
import EmpCombobox from './components/combo/emp-comb'

export default {
  components: { Pagination, OrgSelectTree, DeptSelectTree, EmpCombobox },
  data() {
    return {
      msg: '-',
      text_form: '查询信息',
      text_grid: '考勤汇总',
      list: [],
      listLoading: true,
      total: 0,
      processObject: {
        processTitle: '数据同步中，请耐心等待',
        progressPercentage: 0,
        progressVisible: false,
        progressColors: {
          percent20: '#f56c6c',
          percent50: '#6f7ad3',
          percent100: '#5cb87a'
        }
      },
      calcQueryForm: {
        startDate: new Date(),
        endDate: new Date()
      },
      queryForm: {
        page: 1,
        limit: 20,
        org: '',
        tjfs: '',
        ouId: '',
        orgCode: '',
        deptId: '',
        orgName: '',
        yearmonth: '',
        deptName: '',
        empname: ''
      },
      queryFormRule: {
        yearmonth: [{
          required: true,
          message: '请选择年月',
          trigger: 'blur'
        }]
      },
      inputRules: {

      },
      height: 'calc(100% - 16px)'
    }
  },
  created() {
    this.getList()

    // this.queryForm.orgCode = localStorage.getItem('orgCode')
  },
  methods: {
    bindLabel(orgId, label) {
      if (orgId && orgId !== '') {
        this.queryForm.ouId = orgId
      }

      if (label && label !== '') {
        this.queryForm.orgName = label
      }
    },
    bindDeptLabel(orgId, label) {
      if (orgId && orgId !== '') {
        this.queryForm.deptId = orgId
      }

      if (label && label !== '') {
        this.queryForm.deptName = label
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getList() {
      this.listLoading = true
      summaryList(this.queryForm).then(response => {
        this.list = response.data.records
        this.total = response.data.total

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    onSummaryCalc() { // 点击统计按钮
      var _this = this

      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          _this.processObject.progressVisible = true // 显示进度条
          // 定时增加进度条进度
          _this.timer = setInterval(function() {
            _this.processObject.progressPercentage += 1 // 每次+1
            if (_this.processObject.progressPercentage > 98) {
              _this.processObject.progressPercentage = 98
              clearInterval(_this.timer) // 到98时停止增加
            }
          }, 500)

          summaryCalc(this.queryForm).then(response => {
            // 同步完成，指定进度条为100
            _this.processObject.progressPercentage = 100
            _this.processObject.processTitle = '统计完成'
            // 设定同步消失
            setTimeout(() => {
              _this.processObject.progressVisible = false
              _this.getList()
              _this.processObject = {
                processTitle: '数据统计中，请耐心等待',
                progressPercentage: 0,
                progressVisible: false,
                progressColors: {
                  percent20: '#f56c6c',
                  percent50: '#6f7ad3',
                  percent100: '#5cb87a'
                }
              }
            }, 1000)
          }, error => {
            console.log('err' + error) // for debug
            // _this.$message.error(error.message)
            _this.processObject.progressVisible = false
            _this.getList()
            _this.processObject = {
              processTitle: '数据统计中，请耐心等待',
              progressPercentage: 0,
              progressVisible: false,
              progressColors: {
                percent20: '#f56c6c',
                percent50: '#6f7ad3',
                percent100: '#5cb87a'
              }
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
